<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>纯css实现晴雨表</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- html 代码 -->
  <!-- 晴 -->
  <div class="weather sunny"></div>
  <!-- 阴 -->
  <div class="weather cloudy"></div>
  <!-- 雨 -->
  <div class="weather rainy"></div>
  <!-- 雪 -->
  <div class="weather snowy"></div>
</body>
</html>

<!-- 实现知识点: -->
<!-- 1、transform：用于移位、旋转、缩放效果 -->
<!-- 2、box-shadow：利用投影实现图像的复制(关键！) -->
<!-- 3、clip-path：基于绘制的形状对元素进行遮罩处理 -->
<!-- 4、animation：设置元素的动画 -->
<!-- 实现单标签最关键的:before、:after伪元素运用 -->
<!-- 最大的一点就是：box-shadow的另类玩法——“影分身” -->